<template>
  <div>
    <div class="content_fixed content">
      <p class="drawal_title">我的喵币</p>
      <h4 class="drawal_money">{{ptb}}</h4>
      <h3 class="text">选择充值金额</h3>
      <ul class="item_box">
        <li 
          v-for="(item, index) in list" 
          :key="index" 
          class="list_item"
          @click="tabsClick(index)">
          <van-button class="item_btn" :class="currentIndex === index?'item_btn_active':''">{{item}}</van-button>
        </li>
        <li class="list_item field_box">
          <p class="field_amount">自定义金额</p>
          <span>
            <van-field 
              v-model="value" 
              type="number"
              maxlength="5"
              placeholder="50-99999" 
              class="text_field" 
              @click="tabsClick(4)"
              @input="onChange"
              :class="currentIndex === 4?'item_btn_active':''"/>
          </span>
          <span>元</span>
        </li>
      </ul>
      <h3 class="text mode_recharge">选择充值方式</h3>
      <ul>
        <li 
          v-for="(item, index) in modeList" 
          :key="index"
          class="radio_item"
          @click="radioClick(index)">
          <span :class="payment === index? 'radio_active':''" class="radio"></span>
          <img :src="item.icon" alt="">
          <p>{{item.text}}</p>
        </li>
      </ul>
      <van-button color="#288dff" class="sure_btn" @click="onConfirm">确定</van-button>
      <div class="tips">
        <p style="color: #ff0000">备注：提现余额兑换不收取手续费，兑换后不可退换，支付宝、微信在线充值手续限时免费中！</p>
        <!-- <p>支付宝转账加币说明</p>
        <p>账号：1079704163@qq.com</p>
        <p>支付宝收款码: <van-button class="btn" round color="#288dff" @click="showClick">获取收款码</van-button></p> -->
        <!-- <p>姓：李</p> -->
        <!-- <p>转账后联系对接加币</p>
        <p>附带转账截图+代理id</p>
        <p>（加币时间：早9--晚23，其他时间不加币）</p> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getHomePage, getRedeemVoucher } from '../../../network/home'
export default {
  props: {
    ptb: {
      type: String,
      default: '0.00'
    },
  },
  data() {
    return {
      list: [100, 200, 300, 400],
      modeList: [{
        text: '支付宝支付',
        icon: require('../../../assets/img/charge/alipay.png'),
        type: 2
      },{
        text: '微信支付',
        icon: require('../../../assets/img/charge/wechat.png'),
        type: 3
      },],
      currentIndex: 0,
      value: '',
      payment: 0,
      amount: null,
      paytype: 2,
    }
  },
  created () {
    this.amount = this.list[this.currentIndex]
  },
  methods: {
    tabsClick(index) {
      if (index === 4) {
        this.currentIndex = index
        this.amount = ''
      }else {
        this.currentIndex = index
        this.amount = this.list[this.currentIndex]
      }
    },
    radioClick(index) {
      this.payment = index
      this.paytype = this.modeList[index].type
    },
    onChange(value) {
      this.amount = parseFloat(value)
    },
    onConfirm() {
      if (this.amount < 50) return this.$toast('输入金额过低!')
      getRedeemVoucher(this.amount, this.paytype).then(res => {
        if(res.state === 'ok') {
          window.location.href = res.data.pay_url
        }else if (res.state === 'err') {
          if(res.msg === 'no_login') {
            this.$toast(res.msg)
            this.$router.replace('/login')
          }else {
            this.$toast(res.msg)
          }
        }
      })
    },
    showClick() {
      this.$emit('show-click')
    }
  },
}
</script>

<style scoped>
.drawal_title {
  font-size: 36px;
  color: #333;
  font-weight: 600;
}

.drawal_money {
  padding: 50px 0;
  font-size: 50px;
  color: #333;
}

.content {
  padding: 50px 35px 0;
  width: 680px;
  text-align: center;
}

.text {
  font-size: 36px;
  color: #666;
  font-weight: 500;
}

.item_box {
  margin-top: 30px;
  padding-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f3f3f3;
}

.list_item {
  width: 160px;
  height: 70px;
}

.item_btn {
  width: 160px;
  height: 70px;
  border-radius: 10px;
  font-size: 30px;
  color: #666;
}

.sure_btn {
  width: 680px;
  height: 88px;
  margin-top: 50px;
  border-radius: 10px;
  font-size: 28px;
}

.tips {
  padding-top: 30px;
  line-height: 40px;
  color: #333;
  text-align: left;
  font-size: 24px;
}

.btn {
  font-size: 24px;
  width: 180px;
  height: 40px;
}

.text_field {
  width: 160px;
  height: 70px;
  border: 1px solid rgb(228, 228, 228);
  padding: 0;
  line-height: 70px;
  font-size: 24px;
  border-radius: 10px;
  padding: 0 20px;
  margin: 0 20px;
}

.item_box .field_box {
  margin-top: 20px;
  width: 500px;
  font-size: 24px;
  display: flex;
  align-items: center;
  color: #666;
}

.item_box .field_box .field_amount {
  display: inline-block;
  width: 130px;
}

.item_btn_active {
  border: 1px solid #288dff;
  color: #288dff;
}

.mode_recharge {
  padding-top: 50px;
}

.van-radio {
  display: flex;
  align-items: center;
  height: 88px;
}

.radio_item {
  margin-top: 20px;
  display: flex;
  align-items: center;
  font-size: 24px;
  color: #333;
}

.radio_item img {
  width: 50px;
  height: 50px;
  margin: 0 10px 0 15px;
}

.radio {
  box-sizing: border-box;
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid #999;
  border-radius: 50%;
}

.radio_active {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url('../../../assets/img/charge/icon_active.png') no-repeat;
  background-size: 100%;
  border: 0;
}
</style>